<template>
	<el-dialog :title='$t("common.orderState")' :visible.sync="dialogVisible" :before-close="cancel" width="30%">
		<div id="changeOrder">
			<el-form ref="form" :model="form"  :rules="rules" label-width="80px" label-position="left"
                     :hide-required-asterisk="false">
                <el-form-item v-for="item,key in form" :label="$t('order.'+key)" :prop="key">
                    <el-select v-if="key==='orderState'"
                    			v-model="form[key]" 
                    			:clearable="true"
                               @change="changeOrderState"
                               :placeholder="$t('common.selectPlaceholderTip')">
                        <el-option
                                v-for="item in orderState"
                                :key="item.value"
                                :label="$t('option.'+item.label).indexOf('.')>-1?item.label:$t('option.'+item.label)"
                                :value="item.value">
                        </el-option>
                    </el-select>
                     <div v-else-if="key==='warehouseId'">
                        <el-select  v-model="form[key]"
                        			@change="changeWarehouseId"
                        			:clearable="true"
                                   :placeholder="$t('common.selectPlaceholderTip')">
                            <el-option
                                    v-for="item in warehouseOptions"
                                    :key="item.value"
                                    :label="$t('option.'+item.label).indexOf('.')>-1?item.label:$t('option.'+item.label)"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div v-else-if="key==='logistics'">
                        <el-select  v-model="form[key]"
                        			@change="changelogisticsType"
                        			:clearable="true"
                                   :placeholder="$t('common.selectPlaceholderTip')">
                            <el-option
                                    v-for="item in logisticsTypeOptions"
                                    :key="item.value"
                                    :label="$t('option.'+item.label).indexOf('.')>-1?item.label:$t('option.'+item.label)"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>
            </el-form>
		</div>
		<span slot="footer" class="dialog-footer">
            <el-button @click="cancel">{{$t('common.cancel')}}</el-button>
            <el-button type="primary" @click="confirm">{{$t('common.confirm')}}</el-button>
        </span>
	</el-dialog>
</template>

<script>
	import { orderState } from '../../config/index'
	import { mapState } from 'vuex'
	
	export default {
		name: "changeOrder",
		props: {
			data: {
				type: Object,
				default() {
					return {}
				}
			},
			changeRow: {
				type: Object,
				default() {
					return {}
				}
			},
			refresh: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				dialogVisible: false,
				orderState: orderState,
				warehouseId: '',
				currOrderState: "",
				currWarehouseId:"",
				logisticsType:"",
				logisticsTypeOptions:[],
				form: {
					//orderId: '',
					orderState: '',
					//warehouseId:'',
				}
			}

		},
		methods: {
			changeVisiable() {
				this.dialogVisible = !this.dialogVisible
			},
			changeWarehouseId(w){
				this.currWarehouseId = w;
			},
			changelogisticsType(w){
				this.currlogisticsType = w;
			},
			changeOrderState(v) {
			  if(v===3){
                   this.$set(this.form, 'warehouseId','');
                   this.$set(this.form, 'logistics','');
              }else{
                  delete this.form.warehouseId;
                  delete this.form.logistics;
              }
			  this.currOrderState = v;
			},
			cancel() {
				this.dialogVisible = false;
			},
			confirm() {
				console.log(this.data.length);
				let ids=[];
				let params = {};
				this.data.forEach((item, index) =>{
					item.orderState = this.currOrderState;
					 
					if(this.currOrderState==3){
						item.warehouseId  = this.currWarehouseId;
						item.logisticsType = this.currlogisticsType;
					}
					ids.push(item.orderId);
				})
				params.ids=ids;
				params.orderState=this.currOrderState;
				if(this.currOrderState==3){
					params.wareHouseId=this.currWarehouseId;
				}
				this.dialogVisible = false;
				this.$changeOrder(params).then(response=>{
                    if(response && response.code==='success'){
                        this.$message.success(this.$t('common.success'));
                    }else{
                        this.$message.error(this.$t('common.error'));
                    }
                })
			}
		},
		created(){
			this.logisticsTypeOptions = [{
                            label:this.$t('common.TianLongLogistics'),
                            value:1,
                        },{
                            label:this.$t('common.JNELogistics'),
                            value:2,
                        },{
                            label:this.$t('common.JXLogistics'),
                            value:3,
                        }]
		
		},
		computed:{
            ...mapState(['warehouseOptions']),
       }
	}
</script>

<style>
	#orderEdit .el-menu--horizontal {
		border-bottom: none;
		height: 30px;
	}
	
	#orderEdit .el-menu--horizontal>.el-submenu .el-submenu__title {
		height: 30px;
		line-height: 30px;
	}
</style>